<template>
  <div id="balance">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <div>余额明细</div>
          <el-button
            :disabled="btnLoading"
            @click="handleExport"
            type="primary"
            size="small"
            class="height40"
          >
            {{ btnLoading ? '导出中...' : '导出Excel' }}</el-button
          >
        </div>
      </template>
      <div>
        <el-form
          :inline="true"
          :model="balanceFormData"
          class="demo-form-inline"
        >
          <el-form-item>
            <!-- popper-options 为了解决控制台报警告-->
            <el-select
              @change="orderFromChange"
              v-model="balanceFormData.orderSoure"
              placeholder="订单来源"
              clearable
            >
              <el-option
                v-for="item in orderFromList"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              @change="orderTypeChange"
              v-model="balanceFormData.orderType"
              placeholder="订单类型"
              clearable
            >
              <el-option
                v-for="item in orderTypeList"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              @change="purseTypeChange"
              v-model="balanceFormData.purseType"
              placeholder="交易类型"
              clearable
            >
              <el-option
                v-for="item in dealType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              @change="dataPickerChange"
              clearable
              v-model="timeValue"
              type="daterange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item>
            <el-input
              @keyup.enter="handleInputEnter"
              @clear="handleInputClear"
              clearable
              v-model="balanceFormData.keywords"
              style="width: 250px"
              :prefix-icon="Search"
              placeholder="输入手机号/订单内容"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="table-contaier">
        <el-table
          v-loading="tableLoading"
          :data="tableData"
          stripe
          style="width: 100%"
          :header-cell-style="{ 'border-bottom': 'none' }"
          :header-row-style="{ height: '60px' }"
          :cell-style="{ height: '60px', 'border-bottom': 'none' }"
        >
          <!-- <el-table-column prop="fromSource" label="订单来源" width="130" align="center">
						<template #default="scope">
							{{ scope.row.fromSource || "-" }}
						</template>
					</el-table-column> -->
          <el-table-column
            prop="financialType"
            label="订单类型"
            width="130"
            align="center"
          >
            <template #default="scope">
              {{ scope.row.financialType || '-' }}
            </template>
          </el-table-column>
          <el-table-column
            prop="userMobile"
            label="用户信息"
            width="150"
            align="center"
          >
            <template #default="scope">
              {{ scope.row.userMobile || '-' }}
            </template>
          </el-table-column>
          <el-table-column prop="serviceName" label="订单内容" width="500">
            <template #default="scope">
              {{ scope.row.serviceName || '-' }}
            </template>
          </el-table-column>
          <el-table-column prop="purseType" label="交易类型">
            <template #default="scope">
              {{
                scope.row.purseType == 1
                  ? '支出'
                  : scope.row.purseType == 0
                    ? '收入'
                    : '-'
              }}
            </template>
          </el-table-column>
          <el-table-column prop="amount" label="金额">
            <template #default="scope">
              {{ scope.row.amount || '-' }}
            </template>
          </el-table-column>
          <el-table-column prop="creationTime" label="创建时间" width="160">
            <template #default="scope">
              {{ scope.row.creationTime || '-' }}
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          v-model:page="balanceFormData.page"
          v-model:limit="balanceFormData.pageSize"
          :total="total"
          :background="false"
          @pagination="fetchMoneyLogList"
        ></pagination>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Search } from '@element-plus/icons-vue';
import {
  getMoneyLogList,
  getMoneyType,
  getMoneyLogExport,
} from '@/api/money/moneyLog';
const { proxy } = getCurrentInstance();
const btnLoading = ref(false);
const tableData = ref([]);
const tableLoading = ref(false);
const timeValue = ref('');
const total = ref(0);
const balanceFormData = ref({
  timeStatr: '',
  timeEnd: '',
  orderSoure: '',
  orderType: '',
  purseType: '',
  keywords: '',
  page: 1,
  pageSize: 20,
});

// 交易类型
const dealType = ref([
  {
    value: 1,
    label: '支出',
  },
  {
    value: 0,
    label: '收入',
  },
]);
const fetchMoneyLogExport = () => {
  const { ...otherFields } = balanceFormData.value;
  btnLoading.value = true;
  getMoneyLogExport(otherFields)
    .then((res) => {
      if (res.code == 20000) {
        btnLoading.value = false;
        window.location.href = res.data.url;
        proxy.$modal.msgSuccess('导出成功');
      } else {
        btnLoading.value = false;
      }
    })
    .catch(() => {
      btnLoading.value = false;
    });
};
const handleExport = () => {
  fetchMoneyLogExport();
};
const resetPage = () => {
  balanceFormData.value.page = 1;
  balanceFormData.value.pageSize = 20;
};
// 订单类型筛选条件
const orderTypeList = ref([]);
const handleInputClear = () => {
  resetPage();
  fetchMoneyLogList();
};
const handleInputEnter = () => {
  resetPage();
  fetchMoneyLogList();
};
const dataPickerChange = (val) => {
  if (val) {
    balanceFormData.value.timeStatr = val[0];
    balanceFormData.value.timeEnd = val[1];
  } else {
    balanceFormData.value.timeStatr = '';
    balanceFormData.value.timeEnd = '';
  }
  resetPage();
  fetchMoneyLogList();
};
const purseTypeChange = (val) => {
  balanceFormData.value.purseType = val;
  resetPage();
  fetchMoneyLogList();
};
const orderTypeChange = (val) => {
  balanceFormData.value.orderType = val;
  resetPage();
  fetchMoneyLogList();
};
const orderFromChange = (val) => {
  balanceFormData.value.orderSoure = val;
  resetPage();
  fetchMoneyLogList();
};
// 订单来源筛选条件
const orderFromList = ref([]);
const fetchMoneyLogList = () => {
  tableLoading.value = true;
  getMoneyLogList(balanceFormData.value)
    .then((res) => {
      if (res.code == 20000) {
        tableData.value = res.data.data;
        total.value = res.data.total;
        tableLoading.value = false;
      } else {
        tableLoading.value = false;
      }
    })
    .catch(() => {
      tableLoading.value = false;
    });
};
const fetchMoneyType = () => {
  getMoneyType().then((res) => {
    orderFromList.value = res.orderSoure;
    orderTypeList.value = res.orderType;
  });
};
fetchMoneyLogList();
fetchMoneyType();
</script>

<style lang="scss" scoped>
::v-deep(.el-form--inline .el-form-item) {
  margin-right: 7px;
}

::v-deep(.el-form-item--default) {
  margin-bottom: 4px;
}

.box-card {
  margin: 20px;

  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 20px;
    font-weight: 600;
    color: #1d2129;
    padding: 0 10px;

    .headerSize {
      color: #4e5969;
      font-size: 14px;
      margin-left: 12px;
      font-weight: 400;
      height: 20px;
      line-height: 21px;
    }
  }

  .table-contaier {
    margin-top: 20px;
  }
}
</style>
